<template>
	<div class="login-container">
		<div class="login-form">
			<h2 class="login-title">登录</h2>
			<form>
				<div class="form-item">
					<input id="username" type="text" v-model="username" placeholder="请输入用户名" />
				</div>
				<div class="form-item">
					<input id="password" type="password" v-model="password" placeholder="请输入密码" />
				</div>
				<button type="button" @click="login" class="button">登录</button>
			</form>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		useStore
	} from 'vuex'
	import {
		ElMessage
	} from 'element-plus'
	const router = useRouter()
	const store = useStore()
	const username = ref('')
	const password = ref('')

	const login = () => {
		if (!username.value || !password.value) {
			ElMessage({
				message: '请输入用户名和密码',
				type: 'warning',
			})
			return
		}

		if (username.value === 'admin' && password.value === '123456') {
			store.commit('login') // 更新 Vuex 状态
			router.push({
				name: 'GaiKuang'
			})
			ElMessage({
				message: '登录成功',
				type: 'success',
			})
		} else {
			ElMessage.error('登录失败,用户名或密码错误')
		}
	}
</script>

<style scoped>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background: url('../img/登录.png') no-repeat center center;
		background-size: cover;
	}

	.login-form {
		background: rgba(255, 255, 255, 0.8);
		padding: 30px;
		/* 增加内边距 */
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		width: 350px;
		/* 增加宽度 */
	}

	.login-title {
		text-align: center;
		margin-bottom: 20px;
	}

	.form-item {
		margin-bottom: 20px;
		/* 增加间距 */
	}

	.form-item label {
		display: block;
		margin-bottom: 5px;
	}

	.form-item input {
		width: 100%;
		padding: 8px 0;
		border: none;
		border-bottom: 1px solid #A9A9A9;
		outline: none;
		box-shadow: none;
		background: transparent;
		border-radius: 0;
	}

	button {
		width: 100%;
		padding: 12px;
		/* 增加内边距 */
		border: none;
		background-color: #00C36D;
		color: white;
		border-radius: 4px;
		cursor: pointer;
		font-size: 16px;
		/* 增加字体大小 */
	}

	button:hover {
		background-color: #00C45D;
	}
</style>